<template>
  <div>
    <div class="headers">
      <div class="head">
        <div class="sameDiv">
          <div class="headNav">
            <div class="sames">
              <img src="../assets/icon3.png" alt="" srcset="" />选择区域/语言
            </div>
            <div class="handle">
              <div v-if="!infBox" @click="go" class="sames">
                <img src="../assets/icon1.png" alt="" srcset="" /> 登录 / 注册
              </div>
              <div v-else @click="user">
                <span @click="updateReadFn">
                  <el-badge v-if="notRead" :value="notRead" class="item">
                    <i class="el-icon-message-solid"></i>
                  </el-badge>
                </span>
                <span style="margin-left: 50px"
                  >{{ infBox.nickName }}，您好！</span
                >
              </div>
              <div class="sames">
                <img src="../assets/icon2.png" alt="" srcset="" />

                <el-popover placement="top" width="140" trigger="click">
                  <img class="ewm" src="../assets/9.png" alt="" srcset="" />
                  <div slot="reference" class="circle">手机机致科技</div>
                </el-popover>
              </div>

              <div class="loginout" v-if="infBox" @click="loginout">
                退出登录
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bs-sysMsg" v-if="systemMsg.length > 0">
        <i class="el-icon-message-solid"></i>
        <div class="msg__content">
          <el-carousel
            height="20px"
            direction="vertical"
            indicator-position="none"
            :autoplay="true"
          >
            <el-carousel-item v-for="item in systemMsg" :key="item.noticeId">
              <div
                @click="godetail(item)"
                style="color: #fff; cursor: pointer"
                class="item banner"
              >
               <div> {{ item.noticeTitle }}</div>
               <span style="display: flex; align-items: center;">
                查看详情
                <i class="el-icon-arrow-right"></i>
               </span>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="nav">
        <div class="sameDiv logoBox">
          <div class="logo">
            <img src="../assets/logo.png" alt="" srcset="" />
          </div>

          <!-- {{ activeIndex }} -->
          <!-- {{ $store.state.activeIndex }} -->

          <div class="navlist">
            <el-menu
              active-text-color="#00ADB4"
              :default-active="$store.state.activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
            >
              <el-menu-item index="1">首页</el-menu-item>

              <el-submenu
                :key="index"
                v-for="(item, index) in list"
                :default-active="$store.state.activeIndex"
                @click.native="handleSelMenu(item)"
                :index="item.id + ''"
              >
                <template slot="title"> {{ item.name }}</template>
                <el-menu-item
                  :key="index1"
                  v-for="(inner, index1) in item.detail"
                  :index="inner.id"
                  >{{ inner.name }}</el-menu-item
                >
              </el-submenu>
              <el-submenu index="9">
                <template slot="title">服务与支持</template>
                <el-menu-item index="9-1">技术支持Q&A</el-menu-item>
                <el-menu-item index="9-2">下载中心</el-menu-item>
                <el-menu-item index="9-3">产品定制</el-menu-item>
                <el-menu-item index="9-4">联系我们</el-menu-item>
                <el-menu-item index="9-4">联系我们</el-menu-item>
              </el-submenu>
              <el-menu-item index="10">购物车</el-menu-item>
            </el-menu>
          </div>

          <div class="search">
            <!-- <img src="../assets/icon4.png" alt="" srcset="" /> -->
          </div>
        </div>
      </div>
    </div>
    <slot></slot>

    <div v-if="$route.name != 'user'" class="foots">
      <div class="foot">
        <div class="sameDiv">
          <div class="top">
            <div class="lines">
              <div class="title">热门产品分类</div>
              <div
                @click="goBigCate(item, index)"
                :key="index"
                v-for="(item, index) in list"
              >
                {{ item.name }}
              </div>
              <!-- <div>中空编码器</div>
              <div>关节减速电机</div>
              <div>机械臂</div> -->
            </div>
            <div class="lines">
              <div class="title">服务与支持</div>
              <div @click="go1('/qa', '9-1')">技术支持</div>
              <div @click="go1('/download', '9-2')">下载中心</div>
              <div @click="go1('/customization', '9-3')">产品定制</div>
              <div @click="go1('/aboutus', '9-4')">联系我们</div>
            </div>
            <div class="lines">
              <div class="title">常见问题</div>
              <div @click="go1('/qa', '9-4')">Q&A</div>
            </div>
          </div>

          <div class="bot">
            <div class="left" @click="goConcat">
              <div class="circle">
                <img src="../assets/logo1.png" alt="" />
              </div>
              <span>关于我们</span>
              <span>联系我们</span>
              <span>市场合作</span>
            </div>
            <div></div>

            <div class="right">
              <el-popover placement="top" width="130" trigger="click">
                <!-- <img class="ewm" src="../assets/9.png" alt="" srcset="" /> -->
                <img class="ewm" v-if="info" :src="info.vxUrl" alt="" />
                <div slot="reference" class="circle">
                  <img src="../assets/icon7.png" alt="" srcset="" />
                </div>
              </el-popover>

              <el-popover placement="top" width="130" trigger="click">
                <img class="ewm" v-if="info" :src="info.dyUrl" alt="" />
                <div slot="reference" class="circle">
                  <img src="../assets/icon6.png" alt="" srcset="" />
                </div>
              </el-popover>

              <el-popover placement="top" width="130" trigger="click">
                <img class="ewm" v-if="info" :src="info.bliUrl" alt="" />
                <div slot="reference" class="circle">
                  <img src="../assets/icon5.png" alt="" srcset="" />
                </div>
              </el-popover>
            </div>
          </div>
        </div>
      </div>
      <div class="footers">
        <div>Copyright @机致科技All Rights Reserved.版权所有</div>
        <div class="same">
          网站备案/许可证号：<a href="http://beian.miit.gov.cn" target="_blank"
            >京ICP备2021001935号-1</a
          >
        </div>

        <div class="same">
          <a
            target="_blank"
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011202003701"
          >
            <img
              class="badge"
              src="../assets/hui.png"
              alt="pic"
            />&nbsp;&nbsp;京公网安备11011202003701号</a
          >
        </div>
      </div>
    </div>

    <el-dialog title="通知" :visible.sync="detailFlag" width="50%">
      <div v-if="curNoticeInfo">
        <div style="text-align: center; font-weight: 17px; font-weight: bold;">{{ curNoticeInfo.noticeTitle }}</div>
        <div  style="text-align: right; padding: 10px ;">{{ curNoticeInfo.createTime }}</div>
        <div v-html="curNoticeInfo.noticeContent"></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="detailFlag = false">取 消</el-button> -->
        <el-button type="primary" @click="detailFlag = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 购物车 -->
    <!-- <div class="cart">
      <img src="../assets/car.png" alt="">
    </div> -->
  </div>
</template>

<script>
import {
  getnavigationList,
  getuserinfo,
  checklogin,
  contactus,
  searchnotread,
  updateread,
  searchnotice,
} from "../apis/index";
export default {
  name: "home",
  data() {
    return {
      curNoticeInfo:null,
      detailFlag: false,
      notRead: 0,
      systemMsg: [],
      info: {},
      infBox: null,
      cur: 0,
      flieList: [],
      activeIndex: "1",
      list: [
        // {
        //   name: "中空伺服电机",
        //   id: "2",
        //   detail: [
        //     {
        //       name: "HO3507",
        //       id: "2-1",
        //     },
        //     {
        //       name: "HO4307",
        //       id: "2-2",
        //     },
        //     {
        //       name: "HO5515",
        //       id: "2-3",
        //     },
        //     {
        //       name: "HO6213",
        //       id: "2-4",
        //     },
        //     {
        //       name: "HO7213",
        //       id: "2-5",
        //     },
        //   ],
        // },
        // {
        //   name: "中空编码器",
        //   id: "3",
        //   detail: [
        //     {
        //       name: "d13.5",
        //       id: "3-1",
        //     },
        //     {
        //       name: "d18",
        //       id: "3-2",
        //     },
        //     {
        //       name: "d28.5",
        //       id: "3-3",
        //     },
        //     {
        //       name: "d33",
        //       id: "3-4",
        //     },
        //     {
        //       name: "d42.8",
        //       id: "3-5",
        //     },
        //   ],
        // },
        // {
        //   name: "关节减速电机",
        //   id: "4",
        //   detail: [
        //     {
        //       name: "GR3510ST",
        //       id: "4-1",
        //     },
        //     {
        //       name: "GR3510HP",
        //       id: "4-2",
        //     },
        //     {
        //       name: "XB2206",
        //       id: "4-3",
        //     },
        //     {
        //       name: "XB3507",
        //       id: "4-4",
        //     },
        //     {
        //       name: "XB4307",
        //       id: "4-5",
        //     },
        //   ],
        // },
        // {
        //   name: "机械臂",
        //   id: "5",
        //   detail: [
        //     {
        //       name: "NZ06-GR-500-500",
        //       id: "5-1",
        //     },
        //     {
        //       name: "NZ06-HD-1000-1500渲染图",
        //       id: "5-2",
        //     },
        //   ],
        // },
        // {
        //   name: "通用调试器",
        //   id: "6",
        //   detail: [
        //     {
        //       name: "上位机配套调试版",
        //       id: "6-1",
        //     },
        //     {
        //       name: "USB-CAN&CANFD",
        //       id: "6-2",
        //     },
        //     {
        //       name: "脉冲-CAN&CANFD",
        //       id: "6-3",
        //     },
        //     {
        //       name: "485-CAN&CANFD",
        //       id: "6-4",
        //     },
        //     {
        //       name: "Ethercat-CAN&CANFD",
        //       id: "6-5",
        //     },
        //   ],
        // },
      ],
    };
  },

  mounted() {
    contactus()
      .then((res1) => {
        this.info = res1.data.data;
      })
      .catch(() => {});
    checklogin()
      .then((res) => {
        if (res.data.msg == "true") {
          getuserinfo()
            .then((res) => {
              this.infBox = res.data.data;
              this.getsearchnotread();
            })
            .catch(() => {});
        } else {
          this.infBox = null;
        }
      })
      .catch(() => {});

    this.fngetnavigationList();

  
    this.getsearchnotice();
  },
  methods: {
    godetail(item) {
      console.log(item, 668899);
      this.detailFlag = true;
      this.curNoticeInfo = item
    },
    getsearchnotice() {
      searchnotice()
        .then((res1) => {
          console.log(res1, "^^^^^^^333333");
          this.systemMsg = res1.data.data;
        })
        .catch(() => {});
    },
    getsearchnotread() {
      searchnotread()
        .then((res1) => {
          this.notRead = res1.data.data;
        })
        .catch(() => {});
    },
    updateReadFn() {
      updateread()
        .then((res1) => {
          this.getsearchnotread();
        })
        .catch(() => {});
    },
    loginout() {
      this.$confirm("确定退出登录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          localStorage.removeItem("jztoken");
          this.$message({
            type: "success",
            message: "退出成功!",
          });
          setTimeout(() => {
            this.$router.replace({
              path: "/login",
            });
          }, 500);
        })
        .catch(() => {});
    },
    goBigCate(item, index) {
      let wrap = this.list.filter((r) => r.name == item.name)?.[0]?.detail;

      this.$store.commit("changeactiveIndex", wrap.pop()?.id);
      this.$router.push("/sec?nameType=" + item.name);
    },
    goConcat() {
      this.$router.push("/aboutus");
      this.$store.commit("changeactiveIndex", "7-4");
    },
    fngetnavigationList() {
      getnavigationList()
        .then((res) => {
          // console.log(JSON.stringify(res.data.data, null, 1));
          this.list = res.data.data.map((item, index) => {
            return {
              name: item.nameType,
              id: (index + 2).toString(),
              detail: item.productBusVos.map((product, idx) => {
                return {
                  name: product.productName,
                  id: `${index + 2}-${idx + 1}`,
                  goid: product.id,
                };
              }),
            };
          });

          this.list?.map((r, index) => {
            r.detail.push({
              name: "",
              id: `${r.id}-${r.detail.length + 1}`,
            });
          });
          console.log(this.list, 999999);
        })

        .catch(() => {});
    },
    user() {
      this.$router.push("/user");
    },
    go1(path, active) {
      this.$router.push(path);
      this.activeIndex = active;
      this.$store.commit("changeactiveIndex", this.activeIndex);
      // localStorage.setItem("actives", active);
    },
    go() {
      this.$router.push("/login");
    },
    handleSelect(e, keyPath) {
      console.log(e, keyPath[0], '我是头顶上切换的tab,看下索引');
      this.$store.commit("changeactiveIndex", e);
      if (e == 1) {
        this.activeIndex = e;
        this.$store.commit("changeactiveIndex", this.activeIndex);
        this.$router.push("/");
      } else if (["2", "3", "4", "5", "6", "7", "8"].includes(keyPath[0])) {
        this.$store.commit("changeactiveIndex", e);
        let wrap = this.list.filter((r) => r.id == keyPath[0])?.[0]?.detail;
        let last = wrap.filter((s) => s.id == e);

        this.$router.push({
          path: "/detail?id=" + last?.[0]?.goid,
        });
        // this.$router.push("/sec");
      } else if (e == "9-1") {
        this.activeIndex = "9";
        this.$store.commit("changeactiveIndex", "9");
        this.$router.push("/qa");
      } else if (e == "9-2") {
        this.activeIndex = "9";
        this.$store.commit("changeactiveIndex", "9");
        this.$router.push("/download");
      } else if (e == "9-3") {
        this.activeIndex = "9";
        this.$store.commit("changeactiveIndex", "9");
        this.$router.push("/customization");
      } else if (e == "9-4") {
        this.activeIndex = "9";
        this.$store.commit("changeactiveIndex", "9");
        this.$router.push("/aboutus");
      } else if (e == "10") {
        this.activeIndex = e;
        this.$store.commit("changeactiveIndex", this.activeIndex);
        this.$router.push("/cart");
      }

      // generalPurposeDebugger
    },
    handleSelMenu(e) {
      this.activeIndex = e.detail.slice(-1)[0].id;

      this.$store.commit("changeactiveIndex", this.activeIndex);

      console.log(this.activeIndex, e, 55555);

      if (e.id == 1) {
        this.$router.push("/");
      } else if (["2", "3", "4", "5", "6", "7"].includes(e.id)) {
        this.$router.push("/sec?nameType=" + e.name);
      } else if (e.id == "8") {
        this.$router.push("/generalPurposeDebugger?nameType=" + e.name);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/*轮翻消息*/
// ::v-deep .el-carousel__container{
//   height: 25px !important;
// }
.banner {
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  >div{
    flex: 1;
  }
  i{
    color: #fff;
  }
}
.bs-sysMsg {
  background: #111111;
  position: relative;
  display: flex;
  flex: 1;
  // width: 500px;
  padding: 8px 4%;
  // margin-bottom: 10px;
  // border-radius: 2px;

  // background-color: #fdf6ec;
  overflow: hidden;
  opacity: 1;
  align-items: center;
  transition: opacity 0.2s;
  i {
    color: #fff;
    font-size: 20px;
    margin-top: 5px;
  }
}
.bs-sysMsg .msg__content {
  display: table-cell;
  padding: 0 8px;
  width: 100%;
}
.bs-sysMsg .msg__content a.item {
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  // opacity: 0.75;
}
.bs-sysMsg .msg__content a.item:hover {
  text-decoration: underline;
}
.loginout {
  width: 80px;
  height: 30px;
  border-radius: 15px;
  background: rgb(0, 173, 180);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-left: 20px;
  cursor: pointer;
}
.cart {
  position: fixed;
  bottom: 170px;
  right: 80px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0px 4px 5px #757575;
  z-index: 8;
  img {
    width: 100%;
    height: 100%;
  }
}
.ewm {
  display: block;
  width: 120px !important;
  height: 120px !important;
  margin: 10px auto;
}
.el-menu--horizontal .el-menu .el-menu-item:last-child {
  display: none !important;
  height: 0 !important;
  background: #000 !important;
}

.active {
  color: red;
}
.headers {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background: #fff;
  .search {
    img {
      width: 24px;
      height: 25px;
    }
  }

  ::v-deep .el-menu--horizontal > .el-menu-item.is-active {
    border-bottom: 0;
  }
  ::v-deep .el-menu--horizontal > .el-menu-item {
    font-size: 16px !important;
    font-family: FZLTZHK--GBK1, FZLTZHK--GBK1 !important;
    font-weight: normal !important;
    color: #2a2c2e;
  }
  ::v-deep .el-menu--horizontal > .el-submenu .el-submenu__title {
    color: #2a2c2e;
    font-size: 16px !important;
    border-bottom: none !important;
  }

  ::v-deep .el-menu--horizontal > .el-menu-item.is-active {
    border-bottom-color: #fff !important;
  }
  ::v-deep .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
    border-bottom: 0;
  }
  ::v-deep .el-menu.el-menu--horizontal {
    border-bottom: none;
  }
  .nav {
    padding: 20px 0 15px 0;
    border-bottom: 5px solid #2a2c2e;
    .logoBox {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .logo {
        img {
          width: 199px;
          height: 65px;
        }
        // background: #ccc;
        margin-right: 30px;
      }
      .navlist {
        flex: 1;
      }
    }
  }

  .head {
    width: 100%;
    height: 49px;
    background: #323232;
    border-bottom: 1px solid #2a2c2e;
    .sames {
      display: flex;
      align-items: center;
    }
    img {
      margin-right: 5px;
      width: 20px;
      height: 20px;
    }
  }

  .headNav {
    cursor: pointer;
    height: 49px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-family: FZLTZHK--GBK1, FZLTZHK--GBK1;
    font-weight: normal;
    color: #ffffff;
    .handle {
      display: flex;
      align-items: center;
      > div:nth-child(1) {
        margin-right: 20px;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.ewm {
  display: block;
  width: 110px !important;
  height: 110px !important;
  margin: 15px auto;
}
.foots {
  position: relative;
  z-index: 3;

  .footers {
    padding: 50px 0;
    background: #323232;
    text-align: center;
    div,
    a {
      margin-bottom: 8px;
      color: #eeeeee;
      font-size: 14px;
    }
  }
  .foot {
    padding: 60px 0 30px;
    background: #323232;
    border-bottom: 1px solid #6d6e6e;
    .top {
      display: flex;
      .lines {
        flex: 1;
        > div {
          font-size: 16px;
          font-family: FZLTTHK--GBK1, FZLTTHK--GBK1;
          font-weight: normal;
          color: #eeeeee;

          margin-bottom: 20px;
          cursor: pointer;
        }
        .title {
          color: #ffffff;
          font-size: 18px;
          font-weight: bold;
          cursor: inherit;
        }
      }
    }
    .bot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 15px;
      > div {
        flex: 1;
      }
      .left {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-family: FZLTZHK--GBK1, FZLTZHK--GBK1;
        font-weight: bold;
        color: #eeeeee;
        cursor: pointer;
        span {
          margin-right: 20px;
        }

        .circle {
          width: 82px;
          height: 62px;
          // background: #efefef;
          margin-right: 20px;
        }
      }
      .right {
        display: flex;
        align-items: center;
        .circle {
          img {
            width: 50px;
            height: 50px;
          }

          // background: #efefef;
          margin-right: 20px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>